<template>
  <div v-if="list.length == 0" class="courseList" :style="{ height: height }">
    <el-empty description="暂无课程" style="margin-top: 15vh"></el-empty>
  </div>
  <div v-else class="courseList" :style="{ height: height }">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="course flexBet shou"
      @click="todetail(item)"
    >
      <div class="flex">
        <!-- 勾选框 -->
        <div
          v-if="type == 'primary'"
          @click.stop="
            () => {
              return false;
            }
          "
        >
          <el-checkbox
            v-model="item.checked"
            style="margin: 80px 0 0 24px"
          ></el-checkbox>
        </div>

        <!-- 图片和信息 -->
        <div class="flex">
          <!-- 封面 -->
          <div class="coverBox rela" style="margin: 20px 32px 20px 47px">
            <div
              class="status absolute"
              style="background: #a3a3a3"
              v-if="item.courseStuId"
            >
              未开始
            </div>
            <el-image
              :src="item.coursePic"
              :preview-src-list="[item.coursePic]"
              class="cover boder"
            ></el-image>
          </div>
          <!-- 信息 -->
          <div>
            <div class="flex line1">
              <div class="name overTxt">{{ item.courseName }}</div>
              <!-- 展示学习成果 -->

              <img
                v-if="
                  item.learningResultState == 0 ||
                  (item.learningResultState == 1 &&
                    item.learningProgress == 100)
                "
                @click.stop="showStudyResult(item)"
                class="medal"
                src="@/assets/images/studyResults/studyResult.png"
                alt="加载失败"
              />
            </div>
            <div class="flex line2">
              <div class="day">
                <span class="credit">{{ item.credit }}学分</span> |
                {{ item.studyTime ? item.studyTime : '--' }}时
              </div>
              <img
                class="icon"
                src="@/assets/images/indexIcon2.png"
                alt="加载失败"
              />
              <div class="iconTxt">
                {{ item.principalName ? item.principalName : '' }}
              </div>
              <img
                class="icon"
                src="@/assets/images/indexIcon4.png"
                alt="加载失败"
              />
              <div class="iconTxt">
                {{ item.finishTasks ? item.finishTasks : 0 }}/{{
                  item.allTasks ? item.allTasks : 0
                }}
              </div>
            </div>
            <!-- 课程评分 -->
            <div class="appraise flex">
              <!-- <div class="empty">暂无课程评分</div> -->
              <div class="tip">课程评分</div>
              <el-rate :value="item.avgCourseStar" disabled></el-rate>
            </div>
            <!-- 教师评价 -->
            <div class="evaluate flex" v-if="type == 'studyProgress'">
              <img src="" alt="加载失败"/>

              <div class="overTxt">
                <span>教师评语 : </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 按钮组合 -->
      <div class="flex" style="align-items: center; padding-right: 32px">
        <!-- 学习进度 -->
        <div v-if="type == 'studyProgress' && studyProgress !== 3">
          <el-progress
            type="circle"
            :percentage="item.rate == 100"
            :width="48"
            :status="item.rate == 100 ? 'success' : ''"
            :stroke-width="3"
            color="#28B28B"
            style="margin: 0 18px"
          ></el-progress>
          <div
            style="
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC, sans-serif;
              font-weight: 400;
              color: #999999;
              line-height: 20px;
            "
          >
            我的学习进度
          </div>
        </div>
        <img
          v-if="type == 'studyProgress' && studyProgress == 3"
          src="@/assets/images/repaired.png"
          style="width: 81px; height: 81px"
          alt="加载失败"
        />
        <div v-if="type == 'lookPrimary'" class="cancel shou">取消预选</div>
        <div v-if="type == 'selection'" class="full shou">已满员</div>
        <!--        <handle-->
        <!--          @handle="handleApply(item)"-->
        <!--          :width="100"-->
        <!--          v-if="type == 'select'"-->
        <!--          :radius="20"-->
        <!--          class="apply shou"-->
        <!--          >报名-->
        <!--        </handle>-->
        <handle
          @handle="handleEvaluate(item)"
          :width="100"
          v-if="type == 'evaluate'"
          :radius="20"
          class="apply shou"
          type="default"
        >评价
        </handle>
      </div>
    </div>
    <!-- 评价dialog -->
    <courseEvaluateDialog
      :open.sync="courseEvaluateDialog_open"
      :type="1"
      :item="courseEvaluateDialog_item"
      @refresh="courseEvaluateDialogRefresh"
    ></courseEvaluateDialog>
    <!-- 学习成果弹窗 -->
    <div class="studyResult">
      <el-dialog
        top="1vh"
        title="学生优秀成果"
        width="1245px"
        :visible.sync="studyResultByTime_open"
      >
        <div class="flex">
          <div class="taskListBox" v-loading="loading">
            <div class="taskListBox_title flexBet">
              <div class="courseName overTxt shou">
                <tooltip
                  position="bottom-start"
                  :text="form.name"
                  width="100%"
                />
              </div>
              <div @click="handlechange('course')" class="allExpand flex shou">
                <img
                  v-if="!isClose_course"
                  src="@/assets/images/courseAdd/expand.png"
                  alt="加载失败"
                />
                <img
                  v-else
                  src="@/assets/images/courseAdd/shrink.png"
                  alt="加载失败"
                />
                {{ !isClose_course ? '全部展开' : '全部收起' }}
              </div>
            </div>
            <div
              style="height: calc(94vh - 200px); width: 310px; overflow: auto"
            >
              <courseTrees
                ref="course_trees_ref"
                type="detail"
                :data="studyResultByTime_courseIndexTree"
                @handleClick="handleClick"
              >
              </courseTrees>
            </div>
          </div>

          <!-- 学习成果 -->
          <div class="taskInfoBox" style="width: 882px">
            <div class="topLine">
              {{ dynamicTitle_studyResults }}
            </div>
            <addStudyResults
              :preview="preview"
              type="detail"
              :selectedTaskId="selectedId_studyResults"
              :courseForm="form"
              :selectedType="selectedType_studyResults"
              :tabIndex="4"
            ></addStudyResults>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getCourseIndexTree } from '@/api/course/course'
import courseEvaluateDialog from '@/components/courseEvaluateDialog.vue'
import courseTrees from '@/views/tea_course/components/courseTrees'
import addStudyResults from '@/components/addStudyResults'

export default {
  components: { courseEvaluateDialog, courseTrees, addStudyResults },
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    // 学习记录中 有四种类型
    studyProgress: {
      type: [String, Number],
      default: -1
    },
    height: {
      type: String,
      default: 'calc(100vh - 68px - 18px - 145px - 74px)'
    },
    list: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      courseSchedulingId: '',
      courseId: '',
      //
      courseEvaluateDialog_open: false,
      courseEvaluateDialog_item: '',
      //
      isClose_course: true,
      loading: false,
      studyResultByTime_courseIndexTree: [],
      studyResultByTime_open: false,
      form: {},
      selectedId_studyResults: '',
      selectedType_studyResults: '',
      dynamicTitle_studyResults: '',

      //用于成果的文件预览显示label
      preview: {
        coursePath: '',
        courseName: '',
        studentId: '',
        studentName: ''
      }
    }
  },
  watch: {},
  methods: {
    transformIndexIdToId(nodes) {
      nodes.forEach((node) => {
        // 检查并重命名当前节点的indexId为id
        if (node.hasOwnProperty('id')) {
          node.id = node.id
          node.name = node.name
          node.submitType = node.examSubmitType
        }

        // 递归处理当前节点的children数组（如果存在）
        if (node.hasOwnProperty('children') && Array.isArray(node.children)) {
          this.transformIndexIdToId(node.children)
        }
      })
      return nodes
    },
    // 用于生成xx/xxx/xxxx
    async getPathToNode(nodes, targetId, pathAccumulator = []) {
      for (const node of nodes) {
        // 如果当前节点匹配目标ID，说明路径构建完成，返回累积的路径
        if (node.id === targetId) {
          return [...pathAccumulator, node.name] // 包含当前节点名称
        }

        // 递归查找子节点中的路径
        if (node.children && node.children.length > 0) {
          // 将当前节点的名称添加到路径中，然后递归查找
          const result = await this.getPathToNode(node.children, targetId, [
            ...pathAccumulator,
            node.name
          ])
          if (result) {
            return result // 找到路径，返回
          }
        }
      }

      return null // 未找到目标节点，返回null
    },
    // 学习成果弹窗 任务节点点击
    handleClick(e) {
      this.getPathToNode(this.studyResultByTime_courseIndexTree, e.id).then(
        async(path) => {
          this.preview = {
            coursePath: path ? path.join('/') : '',
            courseName: this.form.courseName,
            studentId: '',
            studentName: ''
          }
        }
      )
      this.dynamicTitle_studyResults = e.name
      this.selectedId_studyResults = e.id
      this.selectedType_studyResults = e.type
    },
    // 展开关闭操作
    handlechange(e) {
      this['isClose_' + e] = !this['isClose_' + e]
      if (this['isClose_' + e]) {
        this.$refs[e + '_trees_ref'].expandAll()
      } else {
        this.$refs[e + '_trees_ref'].collapseAll()
      }
    },
    // 展示学习成果
    async showStudyResult(item) {
      this.studyResultByTime_open = true
      this.$nextTick(async() => {
        this.loading = true
        let res = await getCourseIndexTree(item.courseId)
        const { data } = res
        this.loading = false
        this.form = data
        this.studyResultByTime_courseIndexTree = this.transformIndexIdToId(
          data.children
        )
        this.$refs.course_trees_ref.hightFirst()
      })
    },
    todetail(item) {
      if (item.courseStuId) {
        this.$router.push({
          name: "selectCourseDetail",
          query: {
            courseId: item.courseId,
            courseSchedulingId: item.courseSchedulingId,
            courseStuId: item.courseStuId,
            type: "study",
          },
        });
      } else {
        this.$router.push({
          name: "selectCourseDetail",
          query: {
            courseId: item.courseId,
            courseSchedulingId: item.courseSchedulingId,
            type: "apply",
          },
        });
      }
    },
    /* 评价 */
    handleEvaluate(item) {
      this.courseEvaluateDialog_item = item
      this.courseEvaluateDialog_open = true
    },
    /* 评价组件返回函数 */
    courseEvaluateDialogRefresh() {
      this.$emit('refresh')
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style scoped lang="scss">
.studyResult {
  // ::v-deep {
  //   .el-dialog__header {
  //     display: none;
  //   }
  ::v-deep .el-dialog__body {
    padding: 20px 26px 0 26px !important;
  }
}

// 章节信息盒子
.taskInfoBox {
  .topLine {
    box-sizing: border-box;
    padding-left: 15px;
    height: 45px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-weight: 400;
    color: #333333;
    line-height: 45px;
  }

  .box {
    height: calc(100vh - 330px);
  }
}

.taskListBox {
  border-right: 1px solid #ebebeb;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  &_title {
    box-sizing: border-box;
    padding: 0 15px;
    height: 45px;
    border-bottom: 1px solid #ebebeb;

    .courseName {
      width: 180px;
      font-size: 16px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 600;
      color: #333333;
      line-height: 45px;
    }

    .allExpand {
      user-select: none;

      img {
        margin: auto 4px auto 0;
        width: 16px;
        height: 16px;
      }

      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #666666;
      line-height: 45px;
    }
  }
}

.medal {
  margin: 24px 0 0 10px;
  width: 16px;
  height: 16px;
}

.full {
  width: 100px;
  height: 40px;
  background: rgba($color: #e95756, $alpha: 0.09);
  border-radius: 20px;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #e95756;
  line-height: 40px;
  text-align: center;
}

.cancel {
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC, sans-serif;
  font-weight: 400;
  color: #ffffff;
  line-height: 40px;
  width: 100px;
  height: 40px;
  background: #fead22;
  border-radius: 20px;
}

.card {
  background: rgba($color: #000000, $alpha: 0) !important;
}

div.courseList::-webkit-scrollbar {
  display: none;
}

div.courseList {
  box-sizing: border-box;

  div.course:hover {
    box-shadow: 0 0 20px 0 rgba(0, 55, 50, 0.12);
    border-radius: 16px;
  }

  div.course {
    width: 1360px;
    height: 180px;
    background: #ffffff;
    border-radius: 16px;
    margin-bottom: 20px;

    ::v-deep .el-checkbox__inner {
      width: 20px;
      height: 20px;
    }

    ::v-deep.el-checkbox__inner::after {
      border: 1px solid #fff;
      border-left: 0;
      border-top: 0;
      left: 7px;
      top: 4px;
    }

    div.coverBox {
      border-radius: 6px;

      width: 224px;
      height: 140px;

      div.status {
        left: 6px;
        z-index: 10;
        top: 6px;
        text-align: center;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
        width: 56px;
        height: 20px;
        background: #28b28b;
        border-radius: 4px;
      }

      .cover {
        border-radius: 6px;
        width: 224px;
        height: 140px;
      }
    }

    div {
      div.line1 {
        .type {
          margin: 26px 10px 0 0;
        }

        div.name {
          margin-top: 22px;
          max-width: 815px;
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
          font-weight: 600;
          color: #333333;
          line-height: 22px;
        }
      }

      div.line2 {
        margin-top: 13px;

        div.day {
          width: 136px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #333333;
          line-height: 20px;

          span.credit {
            color: #fb9a55;
          }
        }

        img.icon {
          margin: 0 8px 0 0;
          width: 20px;
          height: 20px;
        }

        div.iconTxt {
          margin-right: 56px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
        }
      }

      div.line3 {
        margin-top: 11px;

        div.Progressbox {
          div.txt {
            div.tip {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC, sans-serif;
              font-weight: 400;
              color: #333333;
              line-height: 17px;
            }

            div.rate {
              font-size: 10px;
              font-family: PingFangSC-Regular, PingFang SC, sans-serif;
              font-weight: 400;
              color: #999999;
              line-height: 17px;
            }
          }

          div.progress {
            margin-top: 6px;
            width: 224px;
            height: 4px;
            background: #ebebeb;
            border-radius: 2px;

            div.active {
              left: 0;
              top: 0;
              height: 4px;
              background: #ffcd7c;
              border-radius: 2px;
            }
          }
        }
      }

      .evaluate {
        margin-top: 28px;

        img {
          margin: auto 0;
          width: 18px;
          height: 15px;
        }

        div {
          margin-left: 10px;
          width: 600px;

          span {
            color: #999999;
          }

          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC, sans-serif;
          font-weight: 400;
          color: #333333;
          line-height: 20px;
        }
      }
    }

    div.appraise {
      margin-top: 12px;

      div.empty {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #999999;
      }

      div.tip {
        margin-right: 10px;
        text-align: center;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC, sans-serif;
        font-weight: 400;
        color: #999999;
        line-height: 20px;
      }
    }
  }
}

.popoverBox {
  box-sizing: border-box;
  padding: 24px;

  .line {
    margin-bottom: 16px;

    div.label {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: #999999;
      line-height: 22px;
    }

    .redvalue {
      color: #e95756;
    }

    div.value {
      word-wrap: break-word;
      width: 224px;
      margin-left: 16px;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
      font-weight: 400;
      color: #333333;
      line-height: 22px;

      .teacher {
        margin-right: 16px;
      }
    }
  }

  .line:nth-last-of-type(1) {
    padding-bottom: 0 !important;
  }
}
</style>
